<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="http://localhost:8080/zt12-26/login.html">登录</a>
    </div>
    <form id="reg-form" action="" method="">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>



        </table>

        <div class="buttons">
            <input value="注 册" type="button" id="buttons">
        </div>
        <br class="clear">
    </form>

</div>

<script>
    document.getElementById("buttons").onclick = function (){
        //1. 给按钮绑定单击事件
        var formData = {
            sname:"",
            password:""//在html里，创建的是一个js对象，使用axios发送的时候会自动封装成json，因此userDesc可以不加双引号
        };
        //获取表单数据
        let usernmae = document.getElementById("username").value;
        let password = document.getElementById("password").value;

        //赋值
        formData.sname=usernmae;
        formData.password=password;//this指向的是window,值如果不存在window里面,用this会报错的

        console.log(formData)

        //2. 发送ajax请求
        axios({
            method:"post",
            url:"http://localhost:8080/zt12-26/register",
            data:formData //json格式
        }).then(function (resp) {
            //获取数据 resp.data是拿到json数据

            if (resp.data.code == 200){
                // 跳转到登录页面
                window.location.href="http://localhost:8080/zt12-26/login.html";
            }else {
                alert("添加错误");
            }
        })
    }
</script>

</body>
</html>
